import * as echarts from 'echarts';

export default class Temperature {
  constructor(basicCesium) {
    this.basicCesium = basicCesium
    this.viewer = basicCesium.viewer
    this.clock = basicCesium.viewer.clock;
    this.imageryLayers = basicCesium.viewer.imageryLayers;

    this.myChart = null;
    this.initLayer();
    this.initEcharts();
  }

  initLayer() {
    var defaultDays = 7;
    var startDay = new Date("1 2,2006");
    var endDay = new Date("12 30,2016");
    var start = Cesium.JulianDate.fromDate(startDay);
    var stop = Cesium.JulianDate.fromDate(endDay);
    this.viewer.clock.startTime = start;
    this.viewer.clock.currentTime = start;
    this.viewer.clock.stopTime = stop;

    this.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
    this.viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER;
    this.viewer.clock.multiplier = 1 * 60 * 60 * 24 * defaultDays;
    this.viewer.timeline.zoomTo(start, stop);
    this.viewer.clock.shouldAnimate = true

    var p0 = new Cesium.SingleTileImageryProvider({
      url: 'img/LandSurfaceTemperature/2006.1.jpg'
    });
    var p1 = new Cesium.SingleTileImageryProvider({
      url: 'img/LandSurfaceTemperature/2006.2.jpg'
    });
    this.layer0 = this.imageryLayers.addImageryProvider(p0);
    this.layer1 = this.imageryLayers.addImageryProvider(p1);
    this.layer1.alpha = 0;
  }

  initEcharts() {
    var dateArray = [];
    for (var i = 2006; i < 2017; i++) {
      for (var j = 1; j < 13; j++) {
        dateArray.push(i.toString() + "." + j.toString());
      }
    }
    var tempArray = [
      0.708, 1.235, 0.99, 0.712, 0.431, 0.917, 0.635, 0.985, 0.769, 1.03, 0.832, 1.348, 1.995, 1.03, 1.167, 1.476, 1.164, 0.793, 0.813, 0.843, 0.83, 1.073, 0.969, 0.872, 0.262, 0.383, 1.59, 0.939, 0.69, 0.619, 0.767, 0.68, 0.691, 1.134, 1.092, 0.737, 1.104, 0.895, 0.757, 0.991, 0.755, 0.678, 0.828, 0.749, 1.047, 0.866, 0.896, 0.662, 1.149, 1.191, 1.415, 1.309, 1.055, 0.88, 0.803, 0.86, 0.764, 1.184, 1.362, 0.647, 0.7, 0.549, 0.7, 2, 1.141, 0.633, 0.852, 1.076, 1.096, 0.806, 1.09, 0.69, 1.029, 0.573, 0.435, 0.699, 1.329, 1.231, 0.972, 0.661, 0.803, 0.905, 1.162, 1.025, 0.45, 1.093, 1.023, 0.939, 0.692, 0.84, 1.041, 0.588, 0.836, 1.034, 0.987, 1.295, 1.071, 1.144, 0.3, 1.057, 1.237, 1.213, 0.812, 0.458, 0.967, 0.976, 1.057, 0.575, 1.193, 1.296, 1.463, 1.428, 0.965, 0.965, 0.977, 0.637, 0.839, 0.869, 1.494, 1.287, 1.789, 1.618, 2.186, 2.137, 1.805, 1.253, 0.846, 0.89, 1.375, 1.008, 1.002, 1.089, 1.261
    ];
    var option = {
      tooltip: {
        show: true
      },
      grid: {
        left: 40,
        top: 15,
        right: 40,
        bottom: 25
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: dateArray,
        axisLabel: {
          color: '#fff'
        }
      }],
      yAxis: [{
        type: 'value',
        axisLabel: {
          formatter: '{value}',
          color: '#fff'
        }
      }],
      series: [{
          name: '当前',
          type: 'scatter',
          symbolSize: 16,
          itemStyle: {
            color: '#a64968'
          },
          data: [
            ["2006.1", 0.708]
          ]
        },
        {
          name: '温差',
          type: 'line',
          data: tempArray,
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          }
        }
      ]
    };
    var canvas = document.getElementById("tempStatis");
    console.log(canvas)
    this.myChart = echarts.init(canvas);
    this.myChart.setOption(option);
    var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var currentMonth = 1;
    this.viewer.animation.viewModel.dateFormatter = (date, viewModel) => {
      var gregorianDate = Cesium.JulianDate.clone(this.clock.currentTime);
      var currentTime = Cesium.JulianDate.toGregorianDate(gregorianDate);
      var nY = currentTime.year;
      var nM = currentTime.month;
      var nD = currentTime.day;

      if (this.layer0.alpha >= 0) {
        var alpha = nD / 30;
        this.layer0.alpha = 1 - alpha;
        this.layer1.alpha = alpha;
      }

      var strIndex = nY + "." + nM;
      var value = tempArray[(nY - 2006) * 12 + nM - 1];
      if (currentMonth != nM) {
        this.updateLayers(nY, nM);
        console.log(this.myChart.getOption());
        let opt = this.myChart.getOption();
        opt.series[0].data = [
          [strIndex, value]
        ];
        this.myChart.setOption(opt)
        currentMonth = nM;
      }
      return monthNames[currentTime.month - 1] + ' ' + currentTime.day + ' ' + currentTime.year;
    };
  }

  updateLayers(nY, nM) {
    console.log(nY, nM);
    var urlNew = "img/LandSurfaceTemperature/" + nY + "." + nM + ".jpg";
    var pNew = new Cesium.SingleTileImageryProvider({
      url: urlNew
    });
    var layerNew = this.imageryLayers.addImageryProvider(pNew);
    this.imageryLayers.remove(this.layer0);
    this.layer0 = this.layer1;
    this.layer0.alpha = 1;
    this.layer1 = layerNew;
    this.layer1.alpha = 0;
  }
}